<template>
  <div class="centerPopup">
    <u-popup :closeOnClickOverlay="true" @close="close" :show="show" bgColor="transparent" mode="center" round="10px">
      <view class="content">
        <div class="title">{{ title }}</div>
        <div class="desc">
          <image
            :show-menu-by-longpress="true"
            @click="previewImage"
            src="https://canyinxinxi.cn/dist_img/46_1683643263070568046.iEUWy45m2X2qc4d527ae91aa84e1ed6870b1ae836341.png"
            mode="scaleToFill"
          />
        </div>
        <div class="foot">
          <div class="cancel" @click="$emit('close')">{{ cancelText }}</div>
          <div class="submit" @tap="call()" @click="$emit('submit')">{{ submitText }}</div>
        </div>
        <div class="js">联系餐饮信息网客服，将在第一时间回复您</div>
      </view>
      <image @click="$emit('close')" class="close" src="@/static/images/common/close.png" mode="scaleToFill" />
    </u-popup>
  </div>
</template>

<script>
import config from "@/config.js";
export default {
  name: "cyxxwkfPopup",
  props: {
    show: {
      type: Boolean,
      default: true,
    },
    title: {
      type: String,
      default: "温馨提示",
    },

    submitText: {
      type: String,
      default: "去充值",
    },
    cancelText: {
      type: String,
      default: "取消",
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    previewImage() {
      uni.previewImage({
        // 需要预览的图片链接列表。若无需预览，可以注释urls
        urls: [e.target.src],
        // 为当前显示图片的链接/索引值
        current: e.target.src,
        // 图片指示器样式
        indicator: "default",
        // 是否可循环预览
        loop: false,
        // 长按图片显示操作菜单，如不填默认为保存相册
        // longPressActions:{
        // 	itemList:[this.l('发送给朋友'),this.l]
        // },
        success: res => {
          console.log("previewImage res", res);
        },
        fail: err => {
          console.log("previewImage err", err);
        },
      });
    },
    close() {
      this.$emit("close");
    },
    call(phone) {
      if (!phone) {
        phone = config.kfdh;
      }
      console.log("传入的电话", phone);
      //uni.makePhoneCall({
      // 	  phoneNumber:phone,
      // 	success(){
      // 		console.log('拨打成功了');
      // 	},
      // 	fail() {
      // 		console.log('拨打失败了');
      // 	}
      // })
      const res = uni.getSystemInfoSync();

      // ios系统默认有个模态框
      if (res.platform == "ios") {
        uni.makePhoneCall({
          phoneNumber: phone,

          success() {
            console.log("拨打成功了");
          },
          fail() {
            console.log("拨打失败了");
          },
        });
      } else {
        //安卓手机手动设置一个showActionSheet
        uni.showActionSheet({
          itemList: [phone, "呼叫"],
          success: function (res) {
            console.log(res);
            if (res.tapIndex == 1) {
              uni.makePhoneCall({
                phoneNumber: phone,
              });
            }
          },
        });
      }
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {},
};
</script>

<style scoped lang="scss">
.centerPopup {
  .content {
    width: 288px;
    min-height: 179px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 20px;
    .title {
      font-size: 18px;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      text-align: center;
    }
    .desc {
      width: 124px;
      height: 124px;
      margin: 10px auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .foot {
      display: flex;
      justify-content: space-around;
      .cancel {
        width: 40%;
        height: 40px;
        border-radius: 20px 20px 20px 20px;
        opacity: 1;
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 400;
        text-align: center;
        line-height: 40px;
        border: 1px solid #ff8822;
        color: #ff8822;
      }
      .submit {
        width: 40%;
        height: 40px;
        background: linear-gradient(90deg, #ffa222 0%, #ff8822 100%);
        border-radius: 20px 20px 20px 20px;
        opacity: 1;
        font-size: 16px;
        font-family: PingFang SC-Semibold, PingFang SC;
        font-weight: 600;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
      }
    }
    .js {
      font-size: 13px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 20px;
    }
  }
  .close {
    width: 23px;
    height: 23px;
    margin: 10px auto;
  }
}
</style>
